<template>
	<view class="layout">
		<view class="layout-main">
			<view class="layout-main-item" :key="index" v-for="(item, index) in filterTypeList">
				<view class="layout-main-item-left">
					{{ item.label }}
				</view>

				<view class="layout-main-item-right" @click="handleClickFeatures(item)">
					<input
						:type="item.inputType || 'text'"
						v-model="submitParams[item.type]"
						:placeholder="item.placeholder"
						placeholder-class="placeholder"
						:disabled="item.icon || isLoading"
						@input="debounced(item)"
					/>
					<template v-if="item.icon">
						<image :src="item.icon" />
					</template>
				</view>
			</view>
		</view>

		<view class="layout-center" v-if="!isVerified">
			<view>根据国家监管要求，请填写身份证号</view>
			<view>提交即同意身份帐号作为本账号的实名认证身份</view>

			<image :src="centerImageUrl" />
		</view>

		<view class="layout-footer">
			<button
				hover-class="none"
				:class="{
					active: isActive,
					disabled: isLoading
				}"
				:loading="isLoading"
				@click="submit"
			>
				<text>提交</text>
			</button>
		</view>
	</view>
</template>

<script>
import { addBank } from '@/api/other';
import { mapGetters, mapMutations } from 'vuex';
import { checkName, identityIDCard, testPaycard, defaultImageUrl } from '@/utils';

const iconDown = require('@/static/tandian/icon_sqtd_right.png');
const centerImageUrl = Object.freeze(`${defaultImageUrl}image/img_smrz_bj.png`);

/* eslint-disable */
const verifedTypeList = [
	{
		label: '真实姓名',
		type: 'realName',
		checkCallback: checkName,
		placeholder: '请填写真实姓名'
	},
	{
		label: '身份证信息',
		type: 'idCard',
		// #ifdef MP-WEIXIN
		inputType: 'idcard',
		// #endif
		placeholder: '请填写身份证信息',
		checkCallback: identityIDCard
	}
];

const itemTypeList = [
	{
		label: '银行',
		type: 'bankName',
		icon: iconDown,
		placeholder: '请选择银行',
		callBack: function () {
			const {
				submitParams: { bankCode }
			} = this;

			uni.navigateTo({
				url: `/otherPage/AllBank?code=${bankCode}`
			});
		}
	},
	{
		label: '开户行',
		type: 'bankBranchName',
		icon: iconDown,
		placeholder: '请选择开户行名称',
		callBack: function () {
			const {
				submitParams: { bankCode }
			} = this;

			if (!bankCode) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '请先选择银行'
				});
				return;
			}

			uni.navigateTo({
				url: `/otherPage/AllAccountBank?bankCode=${bankCode}`
			});
		}
	},
	{
		label: '银行卡号',
		type: 'bankCard',
		checkCallback: testPaycard,
		placeholder: '请填写银行卡号',

		// #ifdef APP-PLUS
		inputType: 'number',
		// #endif

		// #ifdef MP-WEIXIN
		inputType: 'idcard',
		formatCallback: function (params) {
			const { type } = params;
			const formatValue = this.submitParams[type].replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');

			this.submitParams[type] = formatValue;
		}
		// #endif
	}
	// {
	// 	label: '持卡人',
	// 	type: 'bankAccount',
	// 	checkCallback: checkName,
	// 	placeholder: '请填写持卡人姓名'
	// }
];
/* eslint enable */

export default {
	data() {
		return {
			centerImageUrl,

			submitParams: {
				realName: '', // 真实姓名
				idCard: '', // 身份证信息

				bankCard: '', // 银行卡号
				// bankAccount: '', // 持卡人 || 开户名

				bankName: '', // 银行名称
				bankCode: '', // 银行Code

				accountId: '', // 开户行Id
				bankBranchName: '' // 开户行名称
			},

			isActive: false,
			isLoading: false
		};
	},

	computed: {
		...mapGetters(['userInfo']),

		userInfoVerified() {
			const {
				userInfo: { realName, idCard, verifiedStatus }
			} = this;

			return {
				idCard,
				realName,
				verifiedStatus
			};
		},

		isVerified() {
			const {
				userInfoVerified: { verifiedStatus }
			} = this;

			return verifiedStatus === 1;
		},

		filterTypeList() {
			const { isVerified } = this;

			return [!isVerified && verifedTypeList, itemTypeList].filter(Boolean).flat(Infinity);
		}
	},

	methods: {
		...mapMutations(['changeUserInfo']),

		debounced(params) {
			const status = itemTypeList.every((item) => !!this.submitParams[item.type]);
			this.isActive = status;

			const { formatCallback } = params;
			formatCallback && formatCallback.call(this, params);
		},

		handleClickFeatures(params) {
			const { isLoading } = this;
			const { icon, callBack } = params;

			if (!icon || isLoading) {
				return;
			}

			callBack && callBack.call(this);
		},

		// 银行名称
		changeBankInfo(params = {}) {
			const { submitParams } = this;

			this.submitParams = {
				...submitParams,
				...params,

				// bankCard: ''
				accountId: '',
				bankBranchName: ''
			};

			this.debounced(params);
		},

		// 开户行名称
		changeAccountBankInfo(params) {
			const { submitParams } = this;

			this.submitParams = {
				...submitParams,
				...params

				// bankCard: ''
			};

			this.debounced(params);
		},
	
		submit() {
			const {
				isActive,
				isLoading,
				isVerified,

				userInfo,
				submitParams,

				filterTypeList,
				userInfoVerified
			} = this;

			if (!isActive || isLoading) {
				return;
			}

			let formatParams = {};

			const status = filterTypeList.every((item) => {
				const { type, checkCallback } = item;
				const formatValue = (submitParams[type] || '').replace(/\s/g, '');
				formatParams[type] = formatValue;

				if (!checkCallback) {
					return !!submitParams[type];
				}

				const { isPass, errorMessage } = checkCallback?.(formatValue) || {};

				if (!isPass) {
					uni.showToast({
						mask: true,
						icon: 'none',
						title: errorMessage
					});
				}

				return isPass;
			});

			if (!status) {
				return;
			}

			this.isLoading = true;

			const params = Object.assign(
				{
					...submitParams,
					...formatParams,
					cardType: 1, // 银行卡类型 1 （借记卡）
					bankAccount: submitParams.realName || userInfoVerified.realName
				},
				isVerified && {
					...userInfoVerified
				}
			);

			addBank(params)
				.then((res) => {
					const { data } = res;

					this.isLoading = false;

					if (!data) {
						uni.showToast({
							mask: true,
							icon: 'none',
							title: '银行卡添加失败'
						});
					}

					!isVerified &&
						this.changeUserInfo({
							...userInfo,

							verifiedStatus: 1,
							idCard: submitParams.idCard,
							realName: submitParams.realName
						});

					/* eslint-disable */
					const pages = getCurrentPages();
					const beforePage = pages[pages.length - 2];

					beforePage?.$vm.getPageData?.();

					/**
					 * 判断父父级页面是不是申请提现页面。
					 */
					const theTopBeforePage = pages[pages.length - 3] || {};
					theTopBeforePage?.$vm?.getPageData?.();

					uni.navigateBack();
					/* eslint enable */
				})
				.finally(() => {
					this.isLoading = false;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	padding: 20rpx 20rpx 0;
	@include Db_iosBottomDistance();

	&-main {
		padding: 0 28rpx;
		background: #fff;
		border-radius: 24rpx;

		&-item {
			height: 92rpx;
			display: flex;
			align-items: center;
			border-top: 2rpx solid #fafafa;

			color: #333;
			font-size: 28rpx;

			&-left {
				width: 180rpx;
			}

			&-right {
				flex: 1;
				position: relative;

				input {
					color: #333;
					font-size: 28rpx;

					width: 100%;
					height: 92rpx;
					padding: 0 50rpx 0 20rpx;
					box-sizing: border-box;

					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				/deep/ .placeholder {
					color: #999;
					font-size: 28rpx;
				}

				image {
					position: absolute;
					top: 50%;
					right: 0;
					width: 32rpx;
					height: 32rpx;

					transform: translateY(-50%);
				}
			}

			&:first-child {
				border-top: none;
			}
		}
	}

	&-center {
		height: 146rpx;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 24rpx;
		position: relative;

		color: #000;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		padding: 28rpx 0 0 28rpx;

		view:nth-child(2) {
			color: #666;
			font-size: 24rpx;
			line-height: 34rpx;
			font-weight: 400;
			margin-top: 12rpx;
		}

		image {
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			width: 120rpx;
			height: 120rpx;
		}
	}

	&-footer {
		margin-top: 40rpx;

		button {
			@include Db_commonButton(88rpx, 44rpx);

			background: #ccc;

			&:active {
				background: #ccc;
			}

			&.active {
				background: #ff6b11;

				&:active,
				&.disabled {
					background: rgba(255, 107, 17, 0.7);
				}
			}
		}
	}
}
</style>
